document.getElementById('file-upload').addEventListener('change', function (event) {
    const file = event.target.files[0]; // 获取用户上传的文件
    const originalVideo = document.getElementById('original-video'); // 原始视频窗口
    const originalImage = document.getElementById('original-image'); // 原始图片窗口

    if (file) {
        const url = URL.createObjectURL(file); // 生成文件的本地URL

        if (file.type.startsWith('video')) {
            originalVideo.hidden = false;
            originalImage.hidden = true; // 隐藏图片窗口
            originalVideo.src = url; // 显示视频
        } else if (file.type.startsWith('image')) {
            originalImage.hidden = false;
            originalVideo.hidden = true; // 隐藏视频窗口
            originalImage.src = url; // 显示图片
        }
    }
});

let isPolling = false; // 是否正在轮询
let pollingInterval; // 轮询定时器

document.getElementById("start-segmentation").addEventListener('click', function () {
    const fileInput = document.getElementById("file-upload"); // 文件上传按钮
    const file = fileInput.files[0]; // 获取用户上传的文件
    const loader = document.getElementById('loader'); // 加载动画控件
    const statisticsList = document.getElementById('statistics-list').querySelector('tbody'); // 统计信息表格
    const frameCanvas = document.getElementById('frame-canvas'); // 用于显示逐帧结果
    const canvasContext = frameCanvas.getContext('2d'); // Canvas上下文

    // 文件上传事件
    if (!file) {
        alert('Please upload a file first!'); // 提示用户未上传文件
        return;
    }

    const formData = new FormData();
    formData.append('file', file); // 将文件添加到FormData
    formData.append('is_video', file.type.startsWith('video')); // 标记文件是否为视频
    formData.append('model', "model1");
    // 显示加载动画
    loader.style.display = 'block';

    // 发起检测请求
    fetch('/detect', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(json => {
            // 隐藏加载动画
            loader.style.display = 'none';

            // 初始化轮询
            if (file.type.startsWith('video')) {
                frameCanvas.hidden = false; // 显示Canvas
                startPolling(canvasContext, frameCanvas, statisticsList, json.stats);
            } else {
                // 单张图片结果处理
                updateImageResult(json.output_path, statisticsList, json.stats);
            }
        })
        .catch(error => {
            loader.style.display = 'none'; // 隐藏加载动画
            console.error('Error:', error); // 打印错误日志
            alert('An error occurred during detection.'); // 提示用户检测失败
        });
});

function startPolling(canvasContext, frameCanvas, statisticsList, stats) {
    isPolling = true;

    const formData = new FormData();
    formData.append('model', "model1");

    pollingInterval = setInterval(() => {
        fetch('/get_next_frame', {
            method: 'POST', // POST 方法
            body: formData
        })
            .then(response => response.json())
            .then(json => {
                // 检查是否完成处理
                if (json.finished) {
                    stopPolling(); // 停止轮询
                    alert('Video processing complete!'); // 提示完成
                } else if (json.frame_path) {
                    const img = new Image();
                    img.onload = function() {
                        // 根据图片比例动态调整 canvas 大小
                        const aspectRatio = img.width / img.height;
                        const containerWidth = frameCanvas.parentElement.clientWidth || 300; // 父容器宽度
                        frameCanvas.width = containerWidth;
                        frameCanvas.height = containerWidth / aspectRatio; // 高度根据比例调整

                        // 清除并绘制图片到 canvas 上
                        canvasContext.clearRect(0, 0, frameCanvas.width, frameCanvas.height);
                        canvasContext.drawImage(img, 0, 0, frameCanvas.width, frameCanvas.height);
                    };
                    img.src = json.frame_path;
                    updateStatisticsv(statisticsList, stats);
                }
                // else {
                //     console.error('Invalid response:', json);
                //     alert('An unexpected error occurred while processing the video.');
                //     stopPolling(); // 遇到无效响应时停止轮询
                // }
            })
            .catch(error => {
                console.error('Polling error:', error);
                alert('An error occurred during polling.');
                stopPolling(); // 遇到错误时停止轮询
            });
    }, 300); // 每秒请求一次
}

function stopPolling() {
    if (pollingInterval) {
        clearInterval(pollingInterval);
        pollingInterval = null;
    }
    isPolling = false;
}

// 更新统计数据
function updateStatistics(statisticsList, stats) {
    statisticsList.innerHTML = ''; // 清空旧数据
    for (const [label, count] of Object.entries(stats)) {
        const row = document.createElement('tr');
        row.innerHTML = `<td>${label}</td><td>${count}</td>`; // 插入新的统计数据
        statisticsList.appendChild(row);
    }
}

// 更新图片结果
function updateImageResult(imagePath, statisticsList, stats) {
    const detectedImage = document.getElementById('segmented-image');
    detectedImage.src = imagePath;
    detectedImage.hidden = false;

    // 更新统计数据
    updateStatistics(statisticsList, stats);
}

function updateStatisticsv(statisticsList, stats) {
    statisticsList.innerHTML = ''; // 清空旧数据

    // 获取并移除第一帧的信息
    const [frame, objects] = Object.entries(stats).shift();
    delete stats[frame]; // 从原始统计数据中删除该帧

    // 显示帧的对象统计数据
    for (const [label, count] of Object.entries(objects)) {
        const row = document.createElement('tr');
        row.innerHTML = `<td>${label}</td><td>${count}</td>`;
        statisticsList.appendChild(row);
    }
}
